<template>
	<view style="background-color: #D3FAF1 ;">
		<view class="scl-checkup-page" :style="{
        backgroundImage:'url('+staticImgs.bg+')',
        paddingBottom: '68rpx'
     }">
			<u-navbar leftIconColor="#fff" @leftClick="backToPage" bgColor="transparent">
			</u-navbar>
			<view class="top-main-wrapper">
				<view class="more-info-wrapper">
					<view class="abs-more-info" v-if="recentTestDate">
						<view>
							最近检测：{{recentTestDate}}
						</view>
						<view>
							检测进度：{{detectionProgress}}%
						</view>
					</view>
					<view class="abs-total-report" v-if="isShowTotalReport" @click="showTotalReport()">
						<image class="icon" :src="staticImgs.orderIcon" mode=""></image>
						<text>体检总报告</text>
					</view>
				</view>

				<view class="avatar-box">
					<image class="img" :src="avatarImg" mode=""></image>
					<!-- {{JSON.stringify(topBubbleArr)}} -->
					<template v-if="renderBubble">
						<template v-for="(item,index) in topBubbleArr">
							<Bubble :useTip="item.isShowGuideTip" v-if="actSclName != item.remark" :obj="item"
								@cusClick="clickBubble(item)" :status="item.moduleHealthStatus" :str="item.remark"
								:outSty="item.out" :innerSty="item.inner" :adsStyle="item.ads" />
						</template>
					</template>
				</view>


				<view class="warning-info-box">
					<view class="row-1">{{checkupTip}}</view>
					<view class="row-2">深入的检测，才能精准的定位问题</view>
					<view class="row-3">快来做一次个人心理健康体检吧~</view>
				</view>
			</view>


			<view class="scl-group-list-box-wrapper">
				<view class="choice-group-list" v-if="showCheckupPrice">
					<view class="left-col" :class="[actGroup == 'base' ? 'act-col' :'']"
						@click="changeActGroup('base')">
						<view class="row-1">解锁测评</view>
						<view class="row-2">￥{{sclInfo.newOriginalPrice || ''}}</view>
						<view class="row-3">仅包含当前测评分析</view>
					</view>
					<view class="right-col" :class="[actGroup == 'all' ? 'act-col' :'']" @click="changeActGroup('all')">
						<view class="row-1">解锁全维检测</view>
						<view class="row-2">￥{{sclOtherInfo.price || ''}}</view>
						<view class="row-3">包含6个测评及对应分析</view>
					</view>
				</view>
				<view class="scl-group-list-box">
					<view :class="[isActScl90 ? 'tit-img-box-scl90' : 'tit-img-box']">
						<image class="img" :src="boxTit" mode=""></image>
					</view>

					<view class="main-wrapper">
						<view class="tit-intro">
							多维度测评，全面分析心理健康程度
						</view>

						<template v-if="sclList.length>0">
							<template v-if="isActScl90">
								<view class="intro-tit-box">
									包含
								</view>
								<view class="scl-list" style="border-bottom: none;padding-bottom: 30rpx;">
									<view class="scl-box" v-for="(scl,index) in sclList_1" :key="index">
										<view class="name">{{scl.sclName || ''}}</view>
										<view class="num">X1</view>
										<view class="price">¥{{scl.newOriginalPrice || ''}}</view>
									</view>
								</view>
								<view class="intro-tit-box">不包含</view>
								<view class="scl-list unact-scl-list">
									<view class="scl-box" v-for="(scl,index) in sclList_2" :key="index">
										<view class="name">{{scl.sclName || ''}}</view>
										<view class="num">X1</view>
										<view class="price">¥{{scl.newOriginalPrice || ''}}</view>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="intro-tit-box">
									{{sclListData.length}}个测评
								</view>
								<view class="scl-list">
									<view class="scl-box" v-for="(scl,index) in sclListData" :key="index">
										<view class="name">{{scl.sclName || ''}}</view>
										<view class="num">X1</view>
										<view class="price">¥{{scl.newOriginalPrice || ''}}</view>
									</view>
								</view>
							</template>
						</template>

						<view class="scl-more-info">
							<template>
								<view class="info-item">
									<view class="label">测评总价</view>
									<view class="price">￥{{priceObj.sumPrice || ''}}</view>
								</view>
								<view class="info-item">
									<view class="label">优惠减免</view>
									<view class="del-price">-￥{{priceObj.deratePrice || '0'}}</view>
								</view>
							</template>

							<view class="info-item">
								<view class="label bold-label">实际需付款</view>
								<view class="price bold-price">￥{{priceObj.payPrice || ''}}</view>
							</view>

						</view>
					</view>

					<view class="button-wrapper">
						<image class="explanation-img" :src="staticImgs.explanationBtn" v-if="showExplanation" />
						<image class="img" :src="staticImgs.toPayBtn" mode="" @click="toOrderPay"></image>
					</view>
				</view>
			</view>

		</view>

		<TLoading ref="tLoading" />

	</view>
</template>

<script>
	import {
		removeEmptyProperty
	} from '@/common/utils/util.js'
	import Bubble from './Bubble.vue'

	import {
		mapGetters,
		mapState
	} from 'vuex'
	import {
		updateUserInfo
	} from '@/common/api/user_api.js'

	import {
		unescape
	} from '@/common/utils/util.js'
	import {
		debounce
	} from 'lodash'

	import TLoading from '@/components/tt-loading.vue'

	export default {
		components: {
			Bubble,
			TLoading
		},
		props: {
			sclInfo: {
				type: Object,
				default: () => {}
			},
			isFromCheckup: {
				type: Boolean,
				default: false
			},
			showCheckupPrice: {
				type: Boolean,
				default: false
			},
			checkupTip: {
				type: String,
				default: ''
			},
			isScl90: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				staticImgs: {
					bg: this.imgBaseURL + '/scl/checkup-mental/bg-1-v2.png',
					box1: this.imgBaseURL + '/scl/checkup-mental/box-1-v2.png',
					box1NoNum: this.imgBaseURL + '/scl/checkup-mental/box-1-v3.png',
					btn1: this.imgBaseURL + '/scl/checkup-mental/btn-1.png',
					maleAvatar: this.imgBaseURL + '/scl/checkup-mental/male-avatar.png',
					femaleAvatar: this.imgBaseURL + '/scl/checkup-mental/female-avatar.png',
					sad_maleAvatar: this.imgBaseURL + '/scl/checkup-mental/sad-male-avatar.png',
					sad_femaleAvatar: this.imgBaseURL + '/scl/checkup-mental/sad-female-avatar.png',
					defaultAvatar: this.imgBaseURL + '/scl/checkup-mental/default-avatar.png',
					sclListBoxTit: this.imgBaseURL + '/scl/checkup-mental/scl-list-box-tit-v2.png',
					closeIcon: this.imgBaseURL + '/scl/close-icon.png',
					btnBoxBg1: this.imgBaseURL + '/scl/info-box-btn.png',
					warnIcon: this.imgBaseURL + '/scl/checkup-mental/warning-icon.png',
					shareIcon: this.imgBaseURL + '/scl/checkup-mental/share-icon.png',
					sclReportBoxTit: this.imgBaseURL + '/scl/checkup-mental/scl-report-box-tit.png',
					orderIcon: this.imgBaseURL + '/scl/checkup-mental/order-icon.png',
					toPayBtn: this.imgBaseURL + '/scl/checkup-mental/to-pay-btn.png',
					boxTitScl90: this.imgBaseURL + '/scl/checkup-mental/scl90-tit.png',
					explanationBtn: this.imgBaseURL + '/scl/checkup-mental/explanation-btn.png'
				},
				gender: 0,
				actGroup: 'base',
				infoPageStatus: 0, //0 - 展示体检包基本信息，1 - 展示体检包包含的测评及价格
				pageLoading: false,
				sclList: [],
				sclOtherInfo: {},
				payGroupId: '',
				actSclDetail: {},
				showTipModal: false,
				tipsList: [],
				tipObj: {},
				currentTipIndex: 0,
				currentTipKey: 'T1',
				topBubbleArr: [],
				recentTestDate: '', //this.$dayjs().format('YYYY-MM-DD'),
				detectionProgress: 0,
				renderBubble: true,
				showCanvas: false,
				pageDataCommon: {},
				showResult: false,
				report: {},
				pageComp: '',
				totalReportPageVisible: false,
				posterModalVisible: false,
				isDoneQWD: false,
				totalReportEnd: false,
				shareData: {
					title: '个人心理健康体检中心',
					path: '/pages/index/index?userType=check-up',
					imageUrl: this.imgBaseURL + '/share/share-checkup.png',
					desc: '',
					content: ''
				},
				isPayAfterMode: true, //预留开关 防止后续改为先付后测
				sclList_2: [], // 不包含
				sclList_1: [], //包含
				sclListData: []
			}
		},
		watch: {
			showCheckupPrice: {
				handler(val) {
					if (!val) {
						this.actGroup = 'all'
					} else {
						this.actGroup = 'base'
					}
				},
				immediate: true
			}
		},
		computed: {
			...mapGetters('user', [
				'clientUserUid',
				'uGender',
				'hasCheckupTipEnd'
			]),
			...mapState({
				'isPaySclExamination': state => state.user.isPaySclExamination, //是否已购买测评体检包
				userJson: state => state.user.userJson,
				showExplanation: state => state.app.showExplanation
			}),
			priceObj() {
				if (this.actGroup == 'all') {
					return {
						payPrice: this.sclOtherInfo?.price,
						sumPrice: this.sclOtherInfo?.sumPrice,
						deratePrice: this.sclOtherInfo?.deratePrice?.toFixed(2)
					}
				} else {
					if (this.sclInfo?.discountType) {
						return {
							payPrice: this.sclInfo?.discountPrice,
							sumPrice: this.sclInfo?.newOriginalPrice,
							deratePrice: (this.sclInfo?.newOriginalPrice - this.sclInfo?.discountPrice)?.toFixed(2)
						}
					} else {
						return {
							payPrice: this.sclInfo?.newOriginalPrice,
							sumPrice: this.sclInfo?.newOriginalPrice,
							deratePrice: 0
						}
					}
				}
			},
			showPrice() {
				if (this.actGroup == 'all') {
					return this.sclOtherInfo.price
				} else {
					if (this.sclInfo.discountType) {
						return this.sclInfo.discountedPrice
					} else {
						return this.sclInfo.newOriginalPrice
					}
				}
			},
			isActScl90() {
				return this.showCheckupPrice && this.isScl90 && this.actGroup == 'base'
			},
			boxTit() {
				return this.isActScl90 ? this.staticImgs.boxTitScl90 : this.staticImgs.sclListBoxTit
			},
			avatarImg() {
				let sexCode = this.uGender || 0
				// 性别(字典 0未知 1男 2女)
				let avatarArr = [this.staticImgs.defaultAvatar, this.staticImgs.maleAvatar, this.staticImgs.femaleAvatar]

				try {
					if (this.report.scoreArr.some(item => !item.isOk)) {
						avatarArr = [this.staticImgs.defaultAvatar, this.staticImgs.sad_maleAvatar, this.staticImgs
							.sad_femaleAvatar
						]
					}
				} catch (err) {

				}



				return avatarArr[sexCode] //this.staticImgs.defaultAvatar
			},
			pageStatus() {
				// 1 - 未购买样式(体检包基础介绍)，2 - 展示体检包介绍（包含的测评及相应价格）样式，3 - 展示体检包详情 并 根据其
				// if(this.showResult){
				if (this.totalReportPageVisible) {
					return 5
				} else if (this.actSclDetail?.isSclReport == 'Y') {
					return 4
				} else if (this.isPaySclExamination) {
					return 3
					// return 2
				} else if (this.infoPageStatus === 0) {
					return 1
				} else if (this.infoPageStatus === 1) {
					return 2
				}

				return 0
			},

			actSclName() {
				return this.actSclDetail.remark
			},
			isShowTotalReport() {
				return this.isPaySclExamination && this.isDoneQWD
			}
		},
		mounted(opts) {
			console.log(opts, '========================onLoad')

			uni.setStorageSync('hasDoneCheckupScl', 'Y')

			uni.setStorageSync('from', 'afterPayPage')
			if (this.isActScl90) {
				uni.setStorageSync('from', 'afterPayScl90Page')
			}
			uni.setStorageSync('checkupSclId', this.sclInfo.id)

			this.getSclListInfo()
			// await this.addLog(opts)
		},
		methods: {
			clickBubble(item) {
				console.log(item, '=======clickBubble======')
			},
			changeActGroup(act) {
				this.actGroup = act
			},
			updateFinalTip() {
				let tmpJsonStr
				try {
					tmpJsonStr = JSON.parse(this.userJson)
					tmpJsonStr = JSON.stringify({
						...tmpJsonStr,
						hasCheckupTipEnd: 'Y'
					})
				} catch (e) {
					tmpJsonStr = JSON.stringify({
						hasCheckupTipEnd: 'Y'
					})

				}

				updateUserInfo({
					userJson: tmpJsonStr
				}).then(res => {
					this.$store.commit('user/setUserJson', tmpJsonStr)
				})
			},
			async addLog(opts) {
				const {
					data: res
				} = await this.$u.api.getCheckUpList()
				this.sclOtherInfo = res.data

				if (opts.sourceType || opts.sourseType) {
					this.$u.api.addLog({
						sclId: this.sclOtherInfo.sclId,
						sourseType: opts.sourceType || opts.sourseType
					})
				}

				this.$u.api.addLog({
					sclId: this.sclOtherInfo.sclId,
					sourseType: 0
				})
			},
			showShareModal() {
				this.posterModalVisible = true
			},
			async checkTotalReport() {
				let totalOk = true
				const {
					data: res
				} = await this.$u.api.getCheckupSclTotalReport()
				const dRes = res.data
				dRes.resultList.map(item => {
					if (item.isSclReport == 'N') {
						totalOk = false
					}
				})

				this.totalReportEnd = totalOk

				if (totalOk) {
					this.showTotalReport(dRes)
					console.log(this.hasCheckupTipEnd, '=========this.hasCheckupTipEnd')

					if (!this.hasCheckupTipEnd) {
						this.$refs.tLoading.show()
						await this.initCheckSclGroupTipInfo()
						this.$refs.tLoading.hide()
					}

				} else {
					await this.initCheckSclGroupTipInfo()
				}
			},
			async showTotalReport(otherData) {
				this.$refs.tLoading.show()

				let dRes
				if (!otherData) {
					const {
						data: res
					} = await this.$u.api.getCheckupSclTotalReport()
					dRes = res.data
				} else {
					dRes = otherData
				}

				const tmpScoreArr = []
				dRes.resultList.map(item => {
					tmpScoreArr.push({
						label: item.remark,
						score: item.score,
						str: item.healthType,
						isOk: item.isSclReport == 'Y' ? parseInt(item.score) < Number(item.qujian) :
							'Y'
					})
				})

				this.report = {
					createTime: this.$dayjs(dRes.createDate).format("YYYY-MM-DD HH:mm"),
					nickName: dRes.nickName,
					scoreArr: tmpScoreArr,
				}

				this.$refs.tLoading.hide()
				this.totalReportPageVisible = true

				this.actSclDetail = {
					remark: ''
				} // 不要删除，用于清理actSclName
			},


			async initPageInfo() {
				let tmpObj = {}
				if (!this.isScl90) {
					tmpObj = {
						sclId: this.sclInfo.id
					}
					this.actGroup = 'all'
				}

				const {
					data: res
				} = await this.$u.api.getCheckUpSclDetail(tmpObj)

				this.setProgress(res)
				this.sclList = res.data.sclExaminationDetailBOS
				if (this.sclList.length > 0) {

					this.setSclListMore()

					this.actSclDetail = res.data.sclExaminationDetailBOS[res.data.sclExaminationDetailBOS.length - 1]
					for (let i = 0; i < this.sclList.length; i++) {
						if (this.sclList[i].isSclReport == 'N') {
							this.actSclDetail = this.sclList[i]
							break
						}
					}

					const qwdScl = res.data.sclExaminationDetailBOS.find(obj => obj.type === 0)
					this.isDoneQWD = qwdScl.isSclReport == 'Y'
				}

				this.setTopBubbleArr(res.data.sclExaminationDetailBOS)
			},
			setSclListMore() {
				this.sclList_1 = []
				this.sclList_2 = []

				console.log(this.sclList, '-----this.sclList')
				this.sclList.map((item) => {
					//将当前测评加入到 this.sclList_1 中，其他的加入到 this.sclList_2中
					if (item.sclId == this.sclInfo.id) {
						this.sclList_1.push(item)
					} else {
						this.sclList_2.push(item)
					}
				})
			},
			async initCheckSclGroupTipInfo(isNewPay) {
				const {
					data: res
				} = await this.$u.api.getCheckUpSclTextList()
				if (res.code == 200) {
					this.tipsList = res.data.jsonArray

					if (res.data.showKey) {
						if (isNewPay) {
							res.data.showKey = 'T1'
						}
						this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === res.data.showKey)
						this.currentTipKey = res.data.showKey
						this.tipObj = this.tipsList[this.currentTipIndex]

						// setTimeout(()=>{

						// },300)
						this.$nextTick(() => {
							this.showTipModal = true
						})
					} else {
						this.tipObj = this.tipsList[0]
						this.currentTipKey = this.tipObj.key
						this.currentTipIndex = 0
					}

					console.log(this.tipsList, '================this.tipsList')
				}

			},
			async setCurrentTipIndex(targetObj, side) {
				const key = targetObj.next
				if (targetObj.type == 'close') {
					if (this.totalReportEnd) {
						this.updateFinalTip()
					}
					return this.showTipModal = false
				}
				if (targetObj.type == 'skip') {
					return uni.navigateTo({
						url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
							sclId: targetObj.next,
							sclReportType: 1,
						}),
						success: () => {
							this.showTipModal = false
						}
					})
				}

				if (this.currentTipKey == 'T2') {
					this.changeGender(key == 'T3' ? 2 : 1)
				} else if (this.currentTipKey == 'T6') {
					this.$refs.tLoading.show()
					await this.$u.api.giveScl()
					// this.setCurrentTipIndex(targetObj)
					await this.initPageInfo()
					await this.initCheckSclGroupTipInfo()
					return this.$refs.tLoading.hide()
				}

				this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === key)
				this.currentTipKey = key



				this.tipObj = this.tipsList[this.currentTipIndex]
			},
			toSclDetail() {
				uni.navigateTo({
					url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
						sclId: this.actSclDetail.sclId,
						sclReportType: 1,
					})
				})
			},
			toSclReportDetail() {
				uni.navigateTo({
					url: '/subcontractorB/pages/sclResult/sclResult?id=' + this.actSclDetail
						.sclExaminationReprotId +
						'&sclReportType=1'
				})
			},
			changeGender(gender) {
				this.$refs.tLoading.show()
				updateUserInfo({
					sex: gender
				}).then(res => {
					if (res.data.code == 200) {
						let userInfo = this.$store.getters['user/getUserInfo'];
						userInfo.sex = gender
						this.$store.commit('user/setUserInfo', userInfo)
					} else {
						this.$showToast(res.data.message)
					}
				}).finally(() => {
					// uni.hideLoading()
					this.$refs.tLoading.hide()
				})
			},
			backToPage() {
				// 获取是否存在上一页面，如果不存在则返回到测评大厅
				const pages = getCurrentPages()

				if (pages.length === 1) {
					uni.reLaunch({
						url: '/pages/sclList/sclList'
					})
				} else {


					uni.navigateBack()
				}
			},
			async getSclListInfo() {
				this.$refs.tLoading.show()
				const {
					data: res
				} = await this.$u.api.getCheckUpList()
				this.sclList = res.data.sclExaminationBOS
				this.sclListData = JSON.parse(JSON.stringify(this.sclList))
				if (this.checkupTip == '您的抑郁程度可能存在异常') {
					this.sclListData = this.sclList.filter(item => !item.sclName.includes("全维度"))
					const tmpO = this.sclList.find(item => item.sclName.includes("全维度"))
					// 
					res.data.sumPrice = (res.data?.sumPrice - tmpO?.newOriginalPrice)?.toFixed(2)
					res.data.deratePrice = (res.data?.sumPrice - res.data?.price)?.toFixed(2)
				}
				this.setSclListMore()
				this.sclOtherInfo = res.data
				this.sclOtherInfo.deratePrice = Math.abs(this.sclOtherInfo.deratePrice)
				this.payGroupId = this.sclOtherInfo.sclId

				this.setTopBubbleArr(res.data.sclExaminationBOS)
				this.$refs.tLoading.hide()
			},
			extractNumbers(str) {
				// 使用正则表达式 \d+ 匹配所有的数字
				const regex = /\d+/g;
				const numbers = str.match(regex);
				return numbers ? numbers.map(Number) : [];
			},
			setProgress(res) {
				if (res.data.lastDetectionTime) {
					this.recentTestDate = this.$dayjs(res.data.lastDetectionTime).format('YYYY-MM-DD')
				} else {
					this.recentTestDate = ''
				}

				this.detectionProgress = res.data.detectionProgress ? res.data.detectionProgress.toFixed(1) : 0
			},
			setTopBubbleArr(arr) {
				this.topBubbleArr = []
				const tmpStyleArr = [{ // 全维度
					name: '全维度',
					ads: {
						bottom: '100rpx',
						left: '0',
						animationDelay: '2.4s'
					},
					inner: {
						width: '154rpx',
						height: '154rpx'
					},
					out: {
						width: '190rpx',
						height: '190rpx'
					},
				}, { // 抑郁
					name: '抑郁',
					ads: {
						bottom: '100rpx',
						right: '100rpx',
						animationDelay: '1.2s'
					},
					// inner:{},
					// out:{},
				}, { // 焦虑
					name: '焦虑',
					ads: {
						top: '136rpx',
						right: '-48rpx',
						animationDelay: '2.4s'
					},
					// inner:{},
					// out:{},
				}, { // 人际关系
					name: '人际关系',
					ads: {
						bottom: '92rpx',
						right: '-90rpx',
						animationDelay: '1.8s'
					},
					// inner:{},
					// out:{},
				}, { // 压力
					name: '压力',
					ads: {
						top: '160rpx',
						left: '-90rpx',
						animationDelay: '0.6s'
					},
					// inner:{},
					// out:{},
				}, { //敏感
					name: '敏感',
					ads: {
						top: '0',
						left: '-6rpx',
						animationDelay: '0s'
					},
					// inner:{},
					// out:{},
				}]
				for (let i = 0; i < arr.length; i++) {
					const objStyle = tmpStyleArr.find(obj => obj.name == arr[i].remark)

					this.topBubbleArr.push({
						...arr[i],
						name: arr[i].sclName,
						...objStyle,
					})
				}

				console.log(this.topBubbleArr, '=====this.topBubbleArr')
			},
			toOrderPay() {
				if (this.$fangBaoClick()) return
				const that = this
				const arr = this.$SUBSCRIBE_CODES

				uni.getSetting({ //getSetting获取用户的当前设置
					withSubscriptions: true,
					success: res => {
						console.log('res >>>>', res);
						if (res.subscriptionsSetting.mainSwitch &&
							res.subscriptionsSetting &&
							res.subscriptionsSetting[arr[0]] == 'accept' &&
							res.subscriptionsSetting[arr[1]] == 'accept' &&
							res.subscriptionsSetting[arr[2]] == 'accept') {
							that.orderPay()
						} else {
							uni.requestSubscribeMessage({
								tmplIds: arr,
								success(res) {
									console.log('成功');
									that.orderPay()

								},
								fail(res) {
									console.log('失败');
									that.orderPay()
								}
							})
						}
					}
				})
			},
			async orderPay() {
				let that = this;
				if (this.pageLoading) {
					return
				}
				this.pageLoading = true

				let submitForm
				if (this.actGroup == 'all') {
					submitForm = removeEmptyProperty({
						orderType: '12',
						sclId: this.payGroupId || this.sclInfo.id
					})
				} else {
					submitForm = removeEmptyProperty({
						orderType: '7',
						sclId: this.sclInfo.id
					})

					const {
						data: tmpRes
					} = await this.$u.api.getWxPayToken({
						sclId: this.sclId
					})
					submitForm.sclPayToken = tmpRes.data
				}
				// uni.showLoading()
				this.$refs.tLoading.show()
				this.$u.api.addLog({
					sclId: this.sclOtherInfo.sclId,
					sourseType: 1
				})

				this.$u.api.orderPay(submitForm).then(res => {
					if (res.data.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							service: 5,
							orderInfo: res.data.data.wr,
							timeStamp: res.data.data.wr.timeStamp,
							nonceStr: res.data.data.wr.nonceStr,
							package: res.data.data.wr.packageValue,
							signType: res.data.data.wr.signType,
							paySign: res.data.data.wr.paySign,
							success: function(res) {
								console.log(res,
									'================= uni.requestPayment - res')
								that.pageLoading = false
								that.showTipModal = true

								uni.removeStorageSync('hasDoneCheckupScl')
								uni.removeStorageSync('checkupSclId')
								uni.removeStorageSync('from')
								that.$store.commit('user/setIsPaySclExamination', true)
								that.$emit('payOk', true, that.actGroup)

								that.$refs.tLoading.hide()
								setTimeout(() => {
									that.pageLoading = false
								}, 400)
							},
							fail: function(err) {
								that.$showToast('支付取消');
								that.$refs.tLoading.hide()
								setTimeout(() => {
									that.pageLoading = false
								}, 400)
							}
						})
					} else {
						that.$showToast(res.data.message);
						that.$refs.tLoading.hide()
						setTimeout(() => {
							that.pageLoading = false
						}, 400)
					}

				}).catch(() => {
					this.$refs.tLoading.hide()
					setTimeout(() => {
						this.pageLoading = false
					}, 400)
				})

			},
			changeInfoPageStatus(status) {
				this.infoPageStatus = status
			},
		}
	}
</script>
<style lang="scss" scoped>
	@keyframes explanationImg {
		0% {
			transform: translateY(-5rpx);
		}

		50% {
			transform: translateY(5rpx);
		}

		100% {
			transform: translateY(-5rpx);
		}
	}

	.scl-checkup-page {
		width: 100%;
		height: 100vh;
		overflow: scroll;
		overflow-x: hidden;


		background-size: 100%;
		background-repeat: no-repeat;
		// overflow: hidden;
		box-sizing: border-box;

		// background-color: red;

		.top-main-wrapper {
			// padding-top: 360rpx;
			position: relative;
			padding-top: 178rpx;

			.more-info-wrapper {
				width: 100%;
				height: 0;
				border: 0;
				padding: 0;
				position: relative;

				.abs-more-info {
					position: absolute;
					top: -110rpx;
					left: 28rpx;

					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: justify;
					font-style: normal;
				}

				.abs-total-report {
					position: absolute;
					top: -110rpx;
					right: 12rpx;

					width: 177rpx;
					height: 60rpx;
					background: rgba(84, 191, 231, 0.7);
					border-radius: 4rpx;

					display: flex;
					align-items: center;
					justify-content: center;

					font-family: PingFang-SC, PingFang-SC;
					// font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: justify;
					font-style: normal;

					.icon {
						width: 22rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}

			}


			.avatar-box {
				width: 490rpx;
				height: 540rpx;
				margin: auto;
				position: relative;



				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.scl-group-info-box {
			width: 690rpx;
			height: 678rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			box-sizing: border-box;
			padding-bottom: 48rpx;


			.text-wrapper {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #326876;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
			}

			.to-start-btn-wrapper {
				height: 98rpx;
				width: 338rpx;
				margin-top: 20rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

		}

		// .scl-group-info-box -- end



		.scl-group-info-box-paymode-after {
			width: 690rpx;
			height: 636rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			box-sizing: border-box;
			padding-bottom: 48rpx;


			.text-wrapper {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #326876;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
			}

			.to-start-btn-wrapper {
				height: 98rpx;
				width: 338rpx;
				margin-top: 20rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

		}

		// .scl-group-info-box-paymode-after -- end

		.scl-info-box {
			position: relative;
			background: linear-gradient(180deg, #fff 0%, #EFFFE9 100%);
			box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
			border-radius: 24rpx;
			position: relative;
			width: 664rpx;
			padding: 48rpx;
			box-sizing: border-box;
			padding-top: 128rpx;
			margin: auto;


			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
			}

			.scl-name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
				margin: 14rpx 0 20rpx 0;
			}

			.scl-con {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.start-btn-box {
				background-size: 100%;
				background-repeat: no-repeat;
				height: 90rpx;
				width: 370rpx;
				text-align: center;

				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: justify;
				font-style: normal;

				text-align: center;
				margin: auto;
				margin-top: 34rpx;
			}
		}

		.warning-info-box {
			width: 659rpx;
			height: 253rpx;
			background: linear-gradient(180deg, rgba(211, 254, 243, 0.72) 0%, #FFFFFF 100%);
			box-shadow: 0rpx 2rpx 10rpx 0rpx #ACF7E8;
			border-radius: 24rpx;
			margin: auto;

			margin-bottom: 46rpx;
			position: absolute;
			bottom: -92px;
			left: 50%;
			transform: translateX(-50%);

			.row-1 {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #FE9C68;
				line-height: 56rpx;
				text-stroke: 2px #FFFFFF;
				text-align: center;
				font-style: normal;
				// -webkit-text-stroke: 2px #FFFFFF;

				margin: auto;
				margin-top: 28rpx;
				margin-bottom: 20rpx;
			}

			.row-2 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
				font-style: normal;

				width: 548rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #95D7FF 0%, #70C9F9 51%, #76ACFE 100%);
				box-shadow: inset 0rpx 1rpx 20rpx 0rpx #30B6CF;
				border-radius: 30rpx;

				margin: auto;
				margin-bottom: 20rpx;
			}

			.row-3 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #326876;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.scl-group-list-box-wrapper {
			margin-top: 168rpx;

			.choice-group-list {
				display: flex;
				margin-top: 20rpx;
				margin-bottom: 50rpx;
				column-gap: 30rpx;
				justify-content: center;


				.left-col {
					width: 260rpx;
					height: 200rpx;
					background: linear-gradient(176deg, rgba(217, 251, 244, 0.86) 0%, rgba(255, 255, 255, 0.86) 100%);

					border-radius: 12rpx;

					opacity: 0.86;
				}

				.right-col {
					width: 370rpx;
					height: 200rpx;
					background: linear-gradient(176deg, rgba(217, 251, 244, 0.86) 0%, rgba(255, 255, 255, 0.86) 100%);
					border-radius: 12rpx;
				}

				.act-col {
					box-shadow: 0rpx 2rpx 16rpx 0rpx #A5D7EA;
					border: 3rpx solid #3A98C0;
					box-sizing: border-box;
				}

				.row-1 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #326876;
					line-height: 42rpx;
					text-align: center;
					font-style: normal;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}

				.row-2 {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #326876;
					line-height: 56rpx;
					text-align: center;
					font-style: normal;
					margin-bottom: 10rpx;
				}

				.row-3 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #326876;
					line-height: 32rpx;
					text-align: center;
					font-style: normal;
				}

			}
		}



		.scl-group-list-box {
			width: 660rpx;
			// height: 745rpx;
			background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
			box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
			border-radius: 24rpx;
			position: relative;
			margin: auto;
			padding-bottom: 36rpx;
			// margin-top: -116rpx;



			// margin-bottom: 68rpx;
			.tit-img-box-scl90 {
				left: 50%;
				top: -10rpx;
				transform: translateX(-50%);
				position: absolute;
				width: 484rpx;
				height: 62rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.tit-img-box {
				left: 50%;
				top: -10rpx;
				transform: translateX(-50%);

				width: 416rpx;
				height: 62rpx;
				position: absolute;

				.img {
					width: 100%;
					height: 100%;
				}
			}



			.main-wrapper {
				width: 590rpx;
				margin: auto;
				margin-bottom: calc(100rpx + constant(safe-area-inset-bottom));
				;
				margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
				;
				padding-top: 64rpx;
				// background-color: red;

				.tit-intro {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
					text-align: center;
					font-style: normal;
					margin: auto;
					margin-bottom: 20rpx;
					// margin-top: 64rpx;
				}

				.intro-tit-box {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					font-size: 30rpx;
					color: #326876;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					position: relative;
					margin-left: 18rpx;

					margin-bottom: 10rpx;


					&::before {
						width: 8rpx;
						top: 10rpx;
						height: 22rpx;
						background: #326876;
						border-radius: 4rpx;

						content: '';
						position: absolute;
						left: -18rpx;
					}
				}

				.scl-list {
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					row-gap: 14rpx;
					padding-bottom: 30rpx;
					border-bottom: 1rpx dashed #979797;

					.scl-box {
						display: flex;
						align-items: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #326876;
						// line-height: 40rpx;
						// text-align: justify;
						font-style: normal;

						.name {
							width: 434rpx;
							// background-color: #333;

						}

						.num {
							width: 28rpx;
							// background-color: indianred;
						}

						.price {
							flex: 1;
							// background: #BCF1E4;
							text-align: right;
						}
					}
				}

				.unact-scl-list {
					.scl-box {
						color: rgba(50, 104, 118, 0.58);
					}
				}

				.scl-more-info {
					display: flex;
					flex-direction: column;
					row-gap: 14rpx;
					padding-top: 24rpx;


					.info-item {
						display: flex;
						align-items: center;

						.label {
							width: 400rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #326876;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}

						.price {
							flex: 1;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #326876;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
						}

						.del-price {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #F90101;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
							flex: 1;
						}

						.bold-label {
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #326876;
							line-height: 40rpx;
							font-style: normal;
						}

						.bold-price {
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 40rpx;
							color: #326876;
							line-height: 56rpx;
							text-align: right;
							font-style: normal;
						}

					}

				}

			}

			// .main-wrapper - end


			.button-wrapper {
				width: 338rpx;
				height: 98rpx;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				bottom: calc(50rpx + constant(safe-area-inset-bottom));
				bottom: calc(50rpx + env(safe-area-inset-bottom));

				.img {
					width: 100%;
					height: 100%;
				}

				.explanation-img {
					width: 300rpx;
					height: 76rpx;
					left: -136rpx;
					top: -69rpx;
					position: absolute;
					animation: explanationImg 1s linear infinite;
				}
			}


			.close-abs {
				position: absolute;
				right: 34rpx;
				top: 20rpx;

				.img {
					width: 42rpx;
					height: 42rpx;
				}
			}

		}

		.scl-result-container {

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));

			.result-box {

				width: 700rpx;
				box-sizing: border-box;
				// height: 1259rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
				border-radius: 24rpx;


				padding: 120rpx 20rpx 40rpx 20rpx;
				position: relative;


				.tip-name-1 {
					margin: auto;
					width: fit-content;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #326876;
					line-height: 50rpx;
					text-align: center;
					font-style: normal;
				}

				.tip-name-2 {
					margin: auto;
					margin-top: 10rpx;
					width: fit-content;

					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 25rpx;
					color: #326876;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
				}

				.tip-name-3 {
					margin: auto;
					margin-top: 30rpx;
					width: fit-content;

					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #666666;
					line-height: 33rpx;
					text-align: center;
					font-style: normal;
					margin-bottom: 30rpx;
				}

				.label {
					margin: auto;
					margin-top: 30rpx;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #333333;
					width: fit-content;


					position: relative;

					&::after {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						right: -29rpx;
						position: absolute;
					}

					&::before {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						left: -29rpx;
						position: absolute;
					}
				}

			}

			.start-btn-box {
				background-size: 100%;
				background-repeat: no-repeat;
				height: 70rpx;
				width: 350rpx;
				text-align: center;
				position: fixed;

				bottom: calc(constant(safe-area-inset-bottom));
				bottom: calc(env(safe-area-inset-bottom));


				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: justify;
				font-style: normal;

				text-align: center;
				margin: auto;
				margin-top: 34rpx;
			}



		}


		.scl-total-report-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));



			.scl-total-report-wrapper {
				width: 700rpx;
				// height: 852rpx;
				box-sizing: border-box;
				padding: 0 20rpx 30rpx 20rpx;
				background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
				box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
				border-radius: 24rpx;
				position: relative;



				.wrapper-box-tit {
					height: 170rpx;
					width: 384rpx;
					position: absolute;
					left: 50%;
					top: -114rpx;
					transform: translateX(-50%);

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.share-abs-wrapper {
					position: absolute;
					right: 20rpx;
					top: 58rpx;

					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #146F9E;
					line-height: 37rpx;
					text-align: center;
					font-style: normal;

					display: flex;
					align-items: center;

					.img {
						width: 26rpx;
						height: 26rpx;

						margin-right: 12rpx;
					}
				}

				.label {
					margin: auto;
					margin-top: 114rpx;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #333333;
					width: fit-content;


					position: relative;

					&::after {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						right: -29rpx;
						position: absolute;
					}

					&::before {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						left: -29rpx;
						position: absolute;
					}
				}

				.tip-1 {
					margin: auto;
					// margin-top: 30rpx;
					width: fit-content;

					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					font-size: 24rpx;
					color: #666666;
					line-height: 33rpx;
					text-align: center;
					font-style: normal;
					margin-bottom: 20rpx;
				}

				.tip-2 {
					margin: auto;
					width: fit-content;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #326876;
					line-height: 37rpx;
					text-align: center;
					font-style: normal;

					margin-bottom: 30rpx;
				}



				.res-table-container {

					.data-conclusion-box {

						.label-wrapper,
						.data-wrapper {
							.col-1 {
								width: 288rpx;
							}

							.col-2 {
								width: 100rpx;
							}

							.col-3 {
								width: 272rpx;
								padding-right: 20rpx;
								box-sizing: border-box;
								text-align: right;
								height: 100%;
								overflow: hidden;

								.img {
									margin-right: 8rpx;
								}
							}

						}

						// .label-wrapper - end

					}
				}

				// .res-table-container - end

				.more-con-box {
					width: 660rpx;
					margin-top: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 46rpx;
					text-align: justify;
					font-style: normal;
				}


			}


		}
	}

	.btn-base {
		width: 270rpx;
		height: 70rpx;
		border-radius: 45rpx;

		font-family: PingFang-SC, PingFang-SC;
		// font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		font-style: normal;
	}

	.btn-female {
		background: #FCA5C5;
	}

	.btn-normal {
		background: #5ED5FF;
	}





	.data-conclusion-box {
		width: fit-content;
		margin: auto;



		.label-wrapper {
			display: flex;
			width: 660rpx;
			margin: auto;
			border-bottom: 4rpx solid #0B82A2;
			padding-bottom: 16rpx;


			.text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #333333;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}

			.col-1 {
				// width: 48%;
				width: 318rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}

			.col-2 {
				// width: 28%;
				width: 120rpx;
			}

			.col-3 {
				// width: 24%;
				width: 222rpx;
				padding-right: 20rpx;
				box-sizing: border-box;
				text-align: right;
			}

		}

		.data-wrapper {
			display: flex;
			align-items: center;
			flex-direction: column;
			// margin-bottom: 64rpx;
			width: 660rpx;
			margin-top: 16rpx;
			// border: 1rpx solid #C1C1C1;
			box-shadow: 0px 0px 0px 0.5px #c1c1c1;
			// padding-bottom: 24rpx;

			.head-row,
			.head-row-err {
				display: flex;
				align-items: center;
				width: 100%;
				height: 96rpx !important;
				background: rgba(220, 244, 255, .32);


				.col-1 {
					width: 200rpx;
					padding-left: 20rpx;
					box-sizing: border-box;

					.text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #393C5A;
						line-height: 96rpx;
						text-align: left;
						font-style: normal;
					}

					// .colon {
					//   font-size: 32rpx;
					//   font-family: PingFangSC, PingFang SC;
					//   font-weight: 500;
					//   color: #393C5A;
					// }
				}

				.col-2 {
					width: 118rpx;
					box-sizing: border-box;

					.num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #0B82A2;
						line-height: 96rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.col-3 {
					// width: 28%;
					display: flex;
					align-items: center;
					width: 180rpx;

					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;

					line-height: 96rpx;
					text-align: left;
					font-style: normal;
					color: #333333;

					.img {
						margin-left: 8rpx;
						width: 26rpx;
						height: 26rpx;
					}
				}

				.col-4 {
					// width: 24%;
					width: 160rpx;
					box-sizing: border-box;
					padding-right: 20rpx;
					text-align: right;

					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #393C5A;
					line-height: 96rpx;
					font-style: normal;
				}

			}

			.head-row-err {
				background-color: #FFF8F8;

				.col-2 .num {
					color: #F90101;
				}
			}

			.row,
			.row-err {
				display: flex;
				align-items: center;
				width: 100%;
				height: 78rpx;

				.col-1 {
					// width: 32%;
					width: 200rpx;
					padding-left: 20rpx;
					box-sizing: border-box;

					.text {
						font-family: PingFang-SC, PingFang-SC;
						// font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 78rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.col-2 {
					// width: 16%;
					width: 118rpx;
					box-sizing: border-box;

					.num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #0B82A2;
						line-height: 78rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.col-3 {
					// width: 28%;
					width: 180rpx;
					font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 78rpx;
					text-align: left;
					font-style: normal;

					.img {
						margin-left: 8rpx;
						width: 26rpx;
						height: 26rpx;
					}
				}

				.col-4 {
					// width: 24%;
					width: 160rpx;
					box-sizing: border-box;
					padding-right: 20rpx;

					text-align: right;

					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #393C5A;
					line-height: 78rpx;
					font-style: normal;
				}

			}



			.row-err {
				background-color: #FFF8F8;

				.col-2 .num {
					color: #F90101;
				}
			}

		}




	}

	// .data-conclusion-box - end

	.detailed-results-box {
		// margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		width: 100%;

		.block-tit-wrapper {
			display: flex;
			align-items: center;

			// padding-left: 40rpx;
			.icon {
				width: 16rpx;
				height: 32rpx;
				background: linear-gradient(180deg, #95BEF1 0%, #1A529A 100%);
				border-radius: 12rpx;
				margin-right: 10rpx;
			}

			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #07356F;
				line-height: 45rpx;
				letter-spacing: 1px;
				text-align: left;
				font-style: normal;
			}
		}

		.p {

			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;

			font-style: normal;
			text-indent: 1.5em;

			text-align: justify;
		}

		.summary-wrapper {

			// padding: 0 40rpx;
			margin-top: 20rpx;
			margin-bottom: 30rpx;

			.tit {
				margin: auto;
				text-align: center;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #185199;
				margin-bottom: 50rpx;

			}
		}

		.block {
			// padding: 0 40rpx;
			// margin-bottom: 40rpx;

			.p {
				// margin-bottom: 30rpx;
			}

			.sub-tit {

				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #195199;
				margin-bottom: 18rpx;
				margin-left: -20rpx;

				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #195199;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
			}

			.sub-sub-tit {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 18rpx;
			}

			.text-list {
				display: flex;
				flex-direction: column;
				row-gap: 16rpx;

				.li {
					width: 694rpx;

					// width: 592rpx;
					height: 75rpx;
					line-height: 75rpx;
					background-image: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, rgba(245, 249, 255, 0.4) 53%, #D8E9FF 100%);
					background-size: 592rpx 75rpx;
					background-repeat: no-repeat;
					border-radius: 2rpx;
					// opacity: 0.43;

					font-size: 34rpx;
					font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					color: #333333;

					padding-left: 20rpx;
				}
			}
		}




	}

	// .detailed-results-box - end

	.dashed-line {
		margin: auto;
		width: 660rpx;
		height: 1rpx;
		margin: 30rpx auto;

		background-image: repeating-linear-gradient(to right,
				#A9C4F2,
				#A9C4F2 10rpx,
				transparent 10rpx,
				transparent 20rpx);
	}

	// .dashed-line - end
</style>